import React, {Component} from 'react'
import './index.less'
import HomeVM from 'cvm/home'
import { observer } from 'mobx-react/custom'
import { NavLink as Link } from 'react-router-dom'
import PostList from 'components/post/postList'
import Refresh from 'components/common/refresh'

const HomeHeader = observer(({ vm }) => {
  return (
    <div>
      <div className='header'>
        <img src={require('images/logo.png')} className='logo' alt='' />
        <p className='logo-text'>种的是菜，收获的是生活</p>
        <button onClick={vm.handleSign}
          className='sign-in'>{vm.signedInfo}</button>
      </div>
      <div className='classification flex-wrap'>
        <Link to={{pathname: '/topPost'}} className='flex-1'>
          <img src={require('images/plant.png')} alt='' />
          <p>精华</p>
        </Link>
        <Link to={'/talent'} className='flex-1'>
          <img src={require('images/farmer.png')} alt='' />
          <p>达人</p>
        </Link>
        <Link to={{pathname: '/activity'}} className='flex-1'>
          <img src={require('images/windmill.png')} alt='' />
          <p>活动</p>
        </Link>
        <Link to={'/mine'} className='flex-1'>
          <img src={require('images/grains.png')} alt='' />
          <p>更多</p>
        </Link>
      </div>
    </div>
  )
})

const HomeNotify = observer(({ vm }) => {
  if (!vm.notify || vm.notify.length === 0) {
    return <div />
  }
  return (
    <div>{vm.notify.map((item, index) => {
      return (
        <Link to={'/mainText?' + item.data.ID} key={'notify' + index}>
          <p className='news-title'>{item.data.Titile}</p>
        </Link>
      )
    })}
    </div>
  )
})

@observer
export default class Home extends Component {
  vm = new HomeVM({history: this.props.history})
  constructor (props) {
    super(props)
    window.document.title = '绿格子'
  }

  handleSelectedBottomMenu = (pathname) => {
    const { history } = this.props
    if (pathname === '/') return
    history.push({pathname: pathname})
  }

  handleItem = (item) => {
    if (!this.vm.storeData.id) return
    const { history } = this.props
    history.push({pathname: item.pathname, query: {data: this.vm.storeData}})
  }

  render () {
    return (
      <div>
        {this.vm.postListVM &&
          <Refresh onRefresh={this.vm.postListVM.handleRefresh}>
            <div style={{background: 'white'}}>{this.vm.blankMsg}</div>
            {<HomeHeader vm={this.vm} />}
            {<HomeNotify vm={this.vm} />}
            {<PostList vm={this.vm.postListVM} />}
            {this.vm.userInfo.isBlank === 0 &&
              <Link to='post' className='writing-comment'>
                <img src={require('images/writing.png')} alt='' />
              </Link>}
          </Refresh>
        }
      </div>
    )
  }
}
